<template>
  <div class="ad-can-input-number">
    <el-select v-model="has" @change="changeHas" style="width: 104px">
      <el-option label="有" :value="1"/>
      <el-option label="无" :value="0"/>
    </el-select>
    <el-input-number :disabled="$attrs.hasOwnProperty('disabled') || !has ? true : false" v-model="number" v-bind="$attrs" v-on="$listeners" @change="changeNumber"  :controls="false" :min="0" :precision="$attrs.hasOwnProperty('precision') ? $attrs.precision : 0" :placeholder="$attrs.hasOwnProperty('placeholder') ? $attrs.placeholder : '请输入'"/>
    <div class="append" v-if="$attrs.hasOwnProperty('append')">{{$attrs.append}}</div>
  </div>
</template>

<script>
import { isArray } from '@/utils/type'

export default {
  data() {
    return {
      has: 0,
      number: undefined
    }
  },
  watch: {
    '$attrs.model': {
      immediate: true,
      deep: true,
      handler(model) {
        if (isArray(this.$attrs.prop)) {
          this.$attrs.prop.forEach((prop, index) => {
            switch (index) {
              case 0:
                this.has = model[prop]
                break
              case 1:
                this.number = model[prop]
                break
            }
          })
        } else {
          new Error("prop必须为数组类型！")
        }
      }
    }
  },
  methods: {
    changeHas(has) {
      this.$attrs.model[this.$attrs.prop[0]] = has
      if (!has) {
        this.$attrs.model[this.$attrs.prop[1]] = undefined
      }
    },
    changeNumber(number) {
      this.$attrs.model[this.$attrs.prop[1]] = number
    }
  }
}
</script>

<style lang="scss" scoped>
.ad-can-input-number { position: relative; display: flex;
  ::v-deep .el-input--small .el-input__inner { line-height: 30px; }
  ::v-deep .el-select .el-input__inner { border-top-right-radius: 0; border-bottom-right-radius: 0; }
  ::v-deep .el-input-number .el-input__inner { border-left: none; border-top-left-radius: 0; border-bottom-left-radius: 0; }
  .append { position: absolute; right: 8px; }}
</style>